<!--ajax实现三级联动(含ajax嵌套)-->
<!--需要jq.js和ajax_ld.php支持-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax实现三级联动</title>
		<script src="jq/jquery.js"></script>
	</head>
	<body>
		<p>注：如果没有出现选项，可能是数据库中的相关表被删除/改名，并不代表本代码无效</p>
		省份：
		<select id='province'>
			<option value="0">请选择</option>
		</select>
		市:
		<select id="city">
			<option value="0">请选择</option>
		</select>
		区、县:
		<select id="village">
			<option value="0">请选择</option>
		</select>
	</body>
	<script type="text/javascript">
		var cid="";
		$(function(){
		 	$.ajax({
		 		url:"ajax_ld.php",
		 		type:"get",
		 		dataType:"json",
		 		success:function(data){
		 			for(k in data){	
		 				$("#province").append("<option value='"+data[k].pid+"'>"+data[k].pname+"</option>");
		 			}
		 		},
		 	})
		})
		$("#province").change(function(){
		 	var pid= $("#province").val();
		 	$.ajax({
		 		url:"ajax_ld.php",
		 		type:"post",
		 		dataType:"json",
		 		data:"pid="+pid,
		 		success:function(data){
		 			$("#city").empty();
		 			for(k in data){	
		 				$("#city").append("<option value='"+data[k].cid+"'>"+data[k].cname+"</option>");
		 			}
		 			cid = $("#city").val();
		 	       	$.ajax({
				 		url:"ajax_ld.php",
				 		type:"post",
				 		dataType:"json",
				 		data:"cid="+cid,
				 		success:function(data){
				 			$("#village").empty();
				 			for(k in data){	
				 				$("#village").append("<option value='"+data[k].vid+"'>"+data[k].vname+"</option>");
				 			}
				 		}
		 			})
		 		}
		 	})
		})
		$("#city").change(function(){
		 	var cid = $("#city").val();
		 	$.ajax({
		 		url:"ajax_ld.php",
		 		type:"post",
		 		dataType:"json",
		 		data:"cid="+cid,
		 		success:function(data){
		 			$("#village").empty();
		 			for(k in data){	
		 				$("#village").append("<option value='"+data[k].vid+"'>"+data[k].vname+"</option>");
		 			}
		 		}
		 	})
		})
	</script>
</html>